<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition.html</title>
<style>
	#an1, #an2, #an3, #an4, #an5{
		padding:10px;
		width:100px;
		border:2px solid #aaaaaa;
		text-align:center;
		margin:10px;
		border-radius:5px;
		box-shadow:2px 2px 6px #bbbbbb;
	-webkit-transition:background 1s, -webkit-transform 1s;
	}
	#an1:hover, #an2:hover,#an3:hover, #an4:hover, #an5:hover{
	background-color:#ccccff;
	-webkit-transform:rotate(8deg);
	-webkit-transition:background 1s, -webkit-transform 1s;
	
</style>


</head>
<body>

<div id='an1'>Animation1</div>
<div id='an2'>Animation2</div>
<div id='an3'>Animation3</div>
<div id='an4'>Animation4</div>
<div id='an5'>Animation5</div>

</body>
</html>